<!DOCTYPE html>
<html lang="en" xmlns:el-dialog="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Element UI:Table：表格</title>
    <link rel="stylesheet" href="../element/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element/index.js"></script>
</head>
<body>
<div id="app">
   <el-table :data="ta" stripe>
       <el-table-column prop="data" lable="日期"></el-table-column>
       <el-table-column prop="name" lable="姓名"></el-table-column>
       <el-table-column prop="address" lable="地址"></el-table-column>
       <el-table-column label="操作" align="center">
           <template slot-scope="scope">
               <el-button type="primary" size="mini" @click="handleUpdata(scope.row)">编辑</el-button>
               <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
           </template>
       </el-table-column>
   </el-table>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            ta:[{
                data:'2016-09-09',
                name:'王一',
                address:'上海'},
                {data:'3095-94-49',
                name:'王二',
                address:'长沙'
            }]
        },
        methods:{
            handleDelete(row){
                alert(row.data);
            },
            handleUpdata(row){
                alert(row.name);
            }
        }
    })
</script>
</html>